<template>
  <div id="app" style="height: 100vh">
    <el-row class="tac">
      <el-col :span="24">
        <!-- 主容器 -->
        <el-container class="main-container" display="flex">
          <!-- 标题 -->
          <!-- background:#b3c0d1 -->
          <el-header>
            <el-button @click="toCollapse" size="medium" style="background:#b3c0d1;border:0px">
              <i :class="collapseBtnClass[isAsideShow]" style="font-size:15px;color:white;"></i>
            </el-button>
            <el-button @click="isfootershow = !isfootershow" size="medium">Footer</el-button>
          </el-header>

          <!-- 包含路由和路由界面的容器 -->
          <el-container>
            <!-- 路由 -->
            <el-collapse-transition id="main-aside">
              <div v-show="isAsideShow">
                <el-aside id="nav" width="100%" height="100%">
                  <el-menu class="el-menu-vertical-demo" :default-active="$route.path" router>
                    <el-menu-item class="menu-item" index="/">
                      <i class="el-icon-s-home"></i>
                      <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item class="menu-item" index="/setting">
                      <i class="el-icon-setting"></i>
                      <span slot="title">设置</span>
                    </el-menu-item>
                    <el-menu-item class="menu-item" index="/camera">
                      <i class="el-icon-video-camera-solid"></i>
                      <span slot="title">摄像</span>
                    </el-menu-item>
                    <el-menu-item class="menu-item" index="/drawing">
                      <i class="el-icon-picture"></i>
                      <span slot="title">建图</span>
                    </el-menu-item>
                    <el-menu-item class="menu-item" index="/navigation">
                      <i class="el-icon-discover"></i>
                      <span slot="title">导航</span>
                    </el-menu-item>
                    <el-menu-item class="menu-item" index="/about">
                      <i class="el-icon-more-outline"></i>
                      <span slot="title">关于</span>
                    </el-menu-item>
                  </el-menu>
                  <el-container>
                    <div class="container-btn-aside">
                      <el-button
                        @click="
                          drawer = true;
                          showDrawer();
                        "
                        size="medium"
                      >Tools</el-button>
                    </div>
                  </el-container>
                </el-aside>
              </div>
            </el-collapse-transition>

            <!-- 路由主页面 -->

            <el-main class="main-content">
              <router-view />
            </el-main>

            <!-- 抽屉 -->
            <el-drawer title="工具栏" :visible.sync="drawer" direction="rtl">
              <div class="content-nodetable">
                <el-button @click="btnRefreshNode" class="btn-refresh-intools">刷新</el-button>
                <el-table :data="tabledata" stripe height="550px">
                  <el-table-column label="节点" width="270">
                    <template slot-scope="scope">
                      <div
                        slot="reference"
                        class="name-wrapper"
                        @click="btnNodeDetail(scope.row.name);innerdrawer = true;"
                      >
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 子抽屉 -->
              <el-drawer
                title="节点属性"
                :append-to-body="true"
                :visible.sync="innerdrawer"
                direction="rtl"
              >
                <div class="content-nodetable">
                  <el-table :data="sub" stripe height="110px">
                    <el-table-column label="subscribing" width="270">
                      <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                      </template>
                    </el-table-column>
                  </el-table>

                  <el-table :data="pub" stripe height="150px">
                    <el-table-column label="publishing" width="270">
                      <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                      </template>
                    </el-table-column>
                  </el-table>

                  <el-table :data="ser" stripe height="300px">
                    <el-table-column label="services" width="270">
                      <template slot-scope="scope">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-drawer>
            </el-drawer>
          </el-container>

          <!-- 底标题 -->
          <el-footer></el-footer>
        </el-container>
        <!-- 锁定页面置底的可伸缩信息栏 -->
        <transition name="el-zoom-in-bottom">
          <div class="main-footer" v-show="isfootershow">
            <div class="footer-content-status">
              <p>Url: {{ Url }}</p>
              <p>Status: {{ Status }}</p>
            </div>
            <div class="footer-content">
              <p>Mode: {{ Mode }}</p>
            </div>
            <!-- <el-divider direction="vertical"></el-divider> -->
            <div class="footer-content">
              <p>position x: {{ px }}</p>
              <p>position y: {{ py }}</p>
            </div>
            <div class="footer-content">
              <p>orientation x: {{ ox }}</p>
              <p>orientation y: {{ oy }}</p>
            </div>
            <div class="footer-content">
              <p>orientation w: {{ ow }}</p>
              <p>orientation z: {{ oz }}</p>
            </div>
          </div>
        </transition>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { createConnect, ros } from "./js/connect";
import { getNodeList, getNodeDetails } from "./js/loadnode";
import { odom } from "./js/topic";
import { store } from "./state/store";

export default {
  data() {
    return {
      // timer
      timer: null,
      // 侧栏显示
      isAsideShow: true,
      // 侧栏按钮样式
      collapseBtnClass: {
        true: "el-icon-d-arrow-left",
        false: "el-icon-d-arrow-right",
      },
      // status
      Url: "",
      Status: "",
      Mode: "",
      // drawer
      drawer: false,// tools抽屉显示
      innerdrawer: false,// 嵌套抽屉显示
      // nodes,节点列表
      tabledata: [],
      // nodedetail,一个节点的三种类型
      sub: [],
      pub: [],
      ser: [],
      // footer, 
      isfootershow: true,
      // odom
      // position
      px: 0,
      py: 0,
      // orientation
      ox: 0,
      oy: 0,
      ow: 0,
      oz: 0,
    };
  },
  methods: {
    toCollapse() {
      this.isAsideShow = !this.isAsideShow;
    },
    showDrawer() {
      this.refreshNodeList();
    },
    btnRefreshNode() {
      this.refreshNodeList();
    },
    refreshNodeList() {
      getNodeList(ros, this, function (self, array) {
        for (var i = 0, l = self.tabledata.length; i < l; i++) {
          self.tabledata.pop();
        }

        for (i = 0, l = array.length; i < l; i++) {
          self.tabledata.push({
            name: array[i],
          });
        }
      });
    },
    btnNodeDetail(nodename) {
      // console.log(nodename);
      getNodeDetails(ros, nodename, this, function (self, node) {
        // node.subscribing;
        var i = 0,
          l = 0;
        for (i = 0, l = self.sub.length; i < l; i++) {
          self.sub.pop();
        }

        for (i = 0, l = node.subscribing.length; i < l; i++) {
          self.sub.push({
            name: node.subscribing[i],
          });
        }
        // node.publishing;
        for (i = 0, l = self.pub.length; i < l; i++) {
          self.pub.pop();
        }

        for (i = 0, l = node.publishing.length; i < l; i++) {
          self.pub.push({
            name: node.publishing[i],
          });
        }
        // node.services;
        for (i = 0, l = self.ser.length; i < l; i++) {
          self.ser.pop();
        }

        for (i = 0, l = node.services.length; i < l; i++) {
          self.ser.push({
            name: node.services[i],
          });
        }
      });
    },
  },
  created() {
    var that = this;
    ros.on("connection", function () {
      console.log("ROS in Setting.vue: Connected to websocket server.");
      store.setStatusAction("Connected");
      that.Status = store.getStatusAction();
      that.Url = store.getUrlAction();
      // that.turnOffButtonStatus();
    });

    ros.on("error", function (error) {
      console.log(
        "ROS in Setting.vue: Error connecting to websocket server: ",
        error
      );
      store.setStatusAction("Error");
      that.Status = store.getStatusAction();
      // that.turnOnButtonStatus();
    });

    ros.on("close", function () {
      console.log("ROS in Setting.vue: Connection to websocket server closed.");
      store.setStatusAction("Closed");
      that.Status = store.getStatusAction();
      // that.turnOnButtonStatus();
    });

    odom.subscribe(function (message) {
      that.px = message["pose"]["pose"]["position"]["x"].toPrecision(4);
      that.py = message["pose"]["pose"]["position"]["y"].toPrecision(4);
      that.ox = message["pose"]["pose"]["orientation"]["x"].toPrecision(4);
      that.oy = message["pose"]["pose"]["orientation"]["y"].toPrecision(4);
      that.oz = message["pose"]["pose"]["orientation"]["z"].toPrecision(4);
      that.ow = message["pose"]["pose"]["orientation"]["w"].toPrecision(4);
    });
  },
  mounted() {
    var that = this;
    try {
      createConnect();
    } catch {
      console.log("error link");
    }

    this.Status = store.getStatusAction();

    this.timer = setInterval(function () {
      that.refreshNodeList();
      var flag = 0;
      for (var i = 0, l = that.tabledata.length; i < l; i++) {
        // console.log(that.tabledata[i].name);
        if (that.tabledata[i].name == "/amcl") {
          flag = 3;
        } else if (that.tabledata[i].name == "/slam_gmapping") {
          flag = 2;
        }
      }

      if (flag != 0) {
        that.Mode = "Basic";
        if (flag == 2) that.Mode = "gmapping";
        else if (flag == 3) that.Mode = "Navigation";
      } else {
        that.Mode = "Error";
      }
    }, 2000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style>
@import url("./css/app.css");

.container-statusbox {
  /* display: block; */
  /* padding: 20px; */
  height: 20px;
  width: 300px;
}

.container-btn-aside {
  width: 150px;
  height: 200px;
}

.content-nodetable {
  padding: 25px;
}

.btn-refresh-intools {
  float: left;
}

.main-content {
  height: 700px;
}

.main-footer {
  display: inline-flex;
  position: fixed;
  height: 80px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #dcdfe6;
  z-index: 2000;
}

.footer-content-status {
  width: 230px;
  margin-right: 10px;
  margin-left: 10px;
}

.footer-content {
  width: 200px;
  margin-right: 10px;
}
</style>

